<template>
  <h1>插槽</h1>
  <h2>默认插槽</h2>
  <div>
    <Child1>提交</Child1>
    <Child1></Child1>
  </div>
  <h2>具名插槽</h2>
  <!--     <Child2>
      <template v-slot:header> <div>header</div> </template>
      <template v-slot:main> <div>main</div> </template>
      <div>default</div>
      <template v-slot:footer> <div>footer</div> </template>
    </Child2> -->
  <!-- 简写 v-slot:简写#-->
  <Child2>
    <template #header> <div>header</div> </template>
    <template #main> <div>main</div> </template>
    <div>default</div>
    <template #footer> <div>footer</div> </template>
  </Child2>
  <h2>作用域插槽</h2>
  <Child3>
    <!-- <template v-slot:default="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
    <!-- 或者 -->
    <!--       <template #default="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
    <!-- 或者 -->
    <!--   <template v-slot="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template>
      <template #person="slotProps">
        <p>用户姓名：{{ slotProps.user.name }}</p>
        <p>用户年龄：{{ slotProps.user.age }}</p>
      </template> -->
    <!-- 解构 -->
    <template v-slot="{ user: { name, age } }">
      <p>用户1姓名：{{ name }}</p>
      <p>用户1年龄：{{ age }}</p>
    </template>
    <template #person="{ user: { name, age } }">
      <p>用户2姓名：{{ name }}</p>
      <p>用户2年龄：{{ age }}</p>
    </template>
  </Child3>
  <!-- 动态插槽 -->
  <h2>动态插槽</h2>
  <Child3>
    <template v-slot:[dynamicSlotName]="{ user: { name, age } }">
      <p>用户姓名：{{ name }}</p>
      <p>用户年龄：{{ age }}</p>
    </template>
  </Child3>
  <button @click="handleClick">动态插槽切换</button>
</template>

<!-- <script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import Child3 from './components/Child3.vue'
export default {
  name: 'chaocao',
  data() {
    return {
      dynamicSlotName: 'person'
    }
  },
  components: {
    Child1,
    Child2,
    Child3
  }
}
</script> -->
<script setup>
import { ref } from 'vue'
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import Child3 from './components/Child3.vue'
defineOptions({
  name: 'chaocao'
})
const dynamicSlotName = ref('person')
const handleClick = () => {
  dynamicSlotName.value = dynamicSlotName.value == 'default' ? 'person' : 'default'
}
</script>
